<template>
  <div id="app">
    <el-container class="home-container">

      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '220px'">
        <!-- 头部logo -->
        <template>
          <div class="header-title" v-if="!isCollapse">
            <img width="25px" height="25px" src="@/assets/wetobangfav.png">
            <span>帮语后台管理系统</span>
          </div>
          <div class="header-title-hiddle" v-else>
            <span>首页</span>
            <img width="35px" height="35px" src="@/assets/wetobangfav.png" alt="图片加载出错">
          </div>
        </template>

        <!-- 菜单区域 -->
        <el-menu
          background-color="#282C34"
          text-color="#fff"
          active-text-color="#fff"
          :collapse="isCollapse"
          :collapse-transition="false"
          :default-active="tabs.activePath"
          unique-opened
          router>
          <el-menu-item index="/home" @click="saveNavState({path:'/home',name:'Home',label:'首页'})">首页</el-menu-item>
          <!-- 一级菜单 -->
          <el-submenu :index="item.path" v-for="item in menuList" :key="item.name">
            <template slot="title">
              <!-- 加载自定义图标 -->
              <i :class="iconObj[item.id]"></i>
              <span>{{item.label}}</span>
            </template>

            <!-- 二级菜单 -->
            <el-menu-item @click="saveNavState(subitem)" :index="item.path + '/' + subitem.path"
                          v-for="subitem in item.children"
                          :key="subitem.name">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{subitem.label}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 主体 -->
      <el-container>
        <!-- 头部 -->
        <el-header>

          <!-- 侧边栏 折叠 展开 -->
          <div class="toggle-button">
            <div>
              <i :title="isCollapse ? '展开' : '收起'" :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                 @click="toggleCollapse"></i>
            </div>
          </div>

          <!-- 头像下拉菜单 -->
          <div>
            <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <img width="40" height="40" style="border-radius:50%;background:#dddddd" src="@/assets/logo.png"
                   alt="图片加载错误">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="huangjinggao">黄金糕</el-dropdown-item>
                <el-dropdown-item command="shizitou">狮子头</el-dropdown-item>
                <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 内容区 -->
        <el-main>
          <!-- tab标签页区域 - 用于标签页切换 -->
          <div class="tabs-switch-page">
            <el-tag
              size="medium"
              v-for="(tab, index) in (tabs.tabList)"
              :key="tab.name"
              @close="handleClose(tab, index)"
              @click="changeMenu(tab)"
              :closable="tab.name !== 'Home'"
              :effect="tabs.activePath === tab.path ? 'dark' : 'plain'"
            >
              {{tab.label}}
            </el-tag>
          </div>

          <!-- 路由占位符，用于展示内容区的内容 -->
          <div style="padding:15px">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
  export default {
    //组件被创建
    created() {
      // 加载菜单(假数据)
      this.getMenuList()
      // 取出缓存，赋值
      this.tabs = JSON.parse(window.sessionStorage.getItem('tabs') || JSON.stringify(
        {activePath: '/home', tabList: [{path: '/home', name: 'Home', label: '首页'}]}
      )
      );
      console.info('登录后赋值 - ' + this.tabs.tabList)
    },
    data() {
      return {
        // 存储菜单点击情况
        tabs: {
          // 被激活的菜单的链接地址 - 当前已点击的菜单
          activePath: '',
          // 已点击的tab-list数据，如果无缓存，赋默认值 - 默认只有一个首页
          tabList: [],
        },
        menuList: [],
        // 侧边栏 折叠-展开 默认false不折叠
        isCollapse: false,
        //字体 - 菜单id对应图标
        iconObj: {
          '1': 'fa fa-address-book-o',
          '2': 'fa fa-bath',
          '3': 'fa fa-envelope-open',
          '4': 'fa fa-free-code-camp',
          '5': 'fa fa-grav'
        }
      }
    },
    methods: {
      // 右上角下拉菜单点击事件
      handleCommand(command) {
        console.log("command = " + command);
        switch (command) {
          // 退出
          case 'logout':
            // 删除缓存数据
            window.sessionStorage.clear();
            // 跳转到登录页
            this.$router.push("/login");
            break;
        }
      },
      // 点击折叠 展开菜单
      toggleCollapse() {
        this.isCollapse = !this.isCollapse;
      },
      // 点击菜单 - 保存菜单连接激活状态
      saveNavState(submenu) {

        var activePath = submenu.path;
        // 将菜单信息添加到tablist - 添加时判断是否已有该标签
        var result = this.tabs.tabList.some(item => {
          if (item.path === activePath) {
            return true;
          }
        });
        console.log("result = " + result);

        // 如果不包含该对象，则添加
        if (!result) {
          this.tabs.tabList.push({
            path: submenu.path,
            name: submenu.name,
            label: submenu.label
          })
        }

        // 菜单链接值
        this.tabs.activePath = activePath;

        // 点击菜单，同时将该对象存储到sessionStorage - 对象值
        window.sessionStorage.setItem('tabs', JSON.stringify(this.tabs))
      },
      // 关闭tab标签 较多逻辑
      handleClose(tab, index) {
        // 计算标签个数
        let length = this.tabs.tabList.length - 1
        // 删除tabList中的该对象
        for (let i = 0; i < this.tabs.tabList.length; i++) {
          let item = this.tabs.tabList[i]
          if (item.name === tab.name) {
            this.tabs.tabList.splice(i, 1);
          }
        }

        // 如果关闭的标签不是当前路由的话，就不跳转
        if (tab.path !== this.tabs.activePath) {
          return
        }

        // 关闭的是当前路由
        // 关闭的标签是最右边的话，往左边跳转一个
        if (index === length) {
          // 同时更新路径
          this.tabs.activePath = this.tabs.tabList[index - 1].path
          // 同时将该对象存储到sessionStorage - 对象值
          window.sessionStorage.setItem('tabs', JSON.stringify(this.tabs))
          // tab页向左跳转
          this.$router.push({name: this.tabs.tabList[index - 1].name})
        } else {
          // 同时更新路径
          this.tabs.activePath = this.tabs.tabList[index].path
          // 同时将该对象存储到sessionStorage - 对象值
          window.sessionStorage.setItem('tabs', JSON.stringify(this.tabs))
          // tab页向右跳转
          this.$router.push({name: this.tabs.tabList[index].name})
        }
      },
      // 点击标签跳转路由
      changeMenu(item) {
        console.log("item----");
        console.log(item);
        // 首先判断点击的是否是自己，如果是自己则return
        if (this.tabs.activePath === item.path) {
          return;
        }
        // 存储
        this.tabs.activePath = item.path;
        // 同时将该对象存储到sessionStorage - 对象值
        window.sessionStorage.setItem('tabs', JSON.stringify(this.tabs));
        // 页面跳转
        this.$router.push({name: item.name})
      },
      // 获取所有菜单
      getMenuList() {
        // 此处模拟数据，可更换为网络请求赋值
        this.menuList = [
          {
            "label": "管理员模块",
            "path": '/admin',
            "name": 'Admin',
            "children": [
              {
                "label": "审核词汇",
                "path": 'manageNewWord',
                "name": 'ManageNewWord',
                "children": []
              },
              {
                "label": "审核句型",
                "path": 'manageNewSentence',
                "name": 'ManageNewSentence',
                "children": []
              },
              {
                "label": "发布词汇",
                "path": 'publishWord',
                "name": 'PublishWord',
                "children": []
              },
              {
                "label": "发布句型",
                "path": 'publishSentence',
                "name": 'PublishSentence',
                "children": []
              },
            ]
          }
        ]
      }
    },
  };


</script>
<style lang="less" scoped>

  #app {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .home-container {
    height: 100%;
  }

  .el-header {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgb(0, 0, 0);
    font-size: 20px;
    border-bottom: 1px solid #dddddd;
  }

  .el-aside {
    background-color: #282C34;

    .header-title {
      padding-left: 10px;
      height: 60px;
      color: #fff;
      font-weight: bold;
      display: flex;
      font-size: 20px;
      align-items: center;
      cursor: pointer;

      span {
        margin-left: 15px;
      }
    }

    .header-title-hiddle {
      width: 64px;
      height: 64px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      cursor: pointer;
    }

    .header-title-hiddle:hover {
      background-color: #20232A;
    }

    .el-menu {
      border-right: none;
    }
  }

  // 菜单选中背景色
  .el-menu-item.is-active {
    background-color: #1890FF !important;
  }

  // 菜单悬浮背景色
  .el-menu-item:hover {
    background-color: #1890FF !important;
  }

  .el-main {
    background-color: #eaedf1;
    padding: 0;
  }

  .fa {
    margin-right: 10px;
  }

  // 点击展开/折叠按钮
  .toggle-button {
    width: 50%;
    font-size: 20px;
    line-height: 40px;
    color: #595959;
    text-align: left;
    display: flex;
    align-items: center;

    i {
      cursor: pointer;
    }
  }

  // 面包屑导航
  .el-breadcrumb {
    margin-bottom: 0;
  }

  // tab页
  .tabs-switch-page {
    display: flex;
    align-items: center;
    height: 45px;
    background-color: #fff;
    box-shadow: 1px 2px #d2d2d2;
    overflow: hidden;
  }

  .el-tag {
    cursor: pointer;
    margin-left: 10px;
    border-radius: 2px;
    font-size: 12px;
    color: #1890FF;
    border-color: #1890FF;
  }

  .el-tag--dark {
    color: #fff;
    background-color: #1890FF;
  }

  .el-dropdown-link {
    cursor: pointer;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
